<template>
  <div>
    <el-form
      ref="chartGridBenchMark"
      :model="curSetting"
      label-position="top"
      style="height: auto"
    >
      <el-form-item :label="$t('custom.component.gadget.kpi.benchmarkName')">
        <el-select v-model="curSetting.benchmarkName" style="width: 80%" allow-create filterable>
          <el-option
            v-for="(item, index) in benchmarkNameList"
            :key="index"
            :label="item.label"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.kpi.dimension')">
        <el-select v-model="curSetting.dimension" style="width: 80%">
          <el-option
            v-for="(item, index) in dimensionList"
            :key="index"
            :label="item.label"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.kpi.timeFrame')">
        <el-select v-model="curSetting.timeFrame" style="width: 80%">
          <el-option
            v-for="(item, index) in timeFrameList"
            :key="index"
            :label="item.label"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.kpi.benchmark')">
        <el-input v-model="curSetting.benchmark" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <div class="add_bench_mark_btn">
      <el-button type="primary" size="mini" @click="addBenchMark">{{
        $t('custom.component.gadget.kpi.addBenchmark')
      }}</el-button>
    </div>
    <div style="width: 80%">
      <el-divider></el-divider>
    </div>
    <el-table
      :data="benchMark"
      border
      style="width: 100%; font-size: 12px"
    >
      <el-table-column prop="dimension" label="Dimension"> </el-table-column>
      <el-table-column prop="timeFrame" label="Time frame"> </el-table-column>
      <el-table-column prop="benchmark" label="Benchmark"> </el-table-column>
      <el-table-column prop="action" label="Action">
        <template slot-scope="scope">
          <div @click="handleDelete(scope.$index)" style="text-decoration: underline;color: blue;cursor: pointer;user-select: none;">Delete</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'chartGridBenchMark',
  data () {
    return {
      setting: {
        benchMark: ''
      },
      benchMark: [],
      curSetting: {
        benchmarkName: '',
        dimension: '',
        timeFrame: '',
        benchmark: ''
      }
    }
  },
  props: ['data', 'fieldsList'],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    },
    'setting.benchMark' (val) {
      if (val) {
        this.benchMark = JSON.parse(this.setting.benchMark)
      }
    }
  },
  computed: {
    benchmarkNameList () {
      return window.SITE_CONFIG['dictList'] ? window.SITE_CONFIG['dictList'].find(
        e => e.dictType === 'benchmark_name_list'
      ).dataList : []
    },
    dimensionList () {
      return window.SITE_CONFIG['dictList'] ? window.SITE_CONFIG['dictList'].find(
        e => e.dictType === 'benchmark_dimension_list'
      ).dataList : []
    },
    timeFrameList () {
      return window.SITE_CONFIG['dictList'] ? window.SITE_CONFIG['dictList'].find(
        e => e.dictType === 'benchmark_timeframe_list'
      ).dataList : []
    },
  },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
  },
  methods: {
    getData () {
      return { benchMark: this.setting.benchMark }
    },
    updateSetting (value, list, layerStatus) {
      this._.merge(this.setting, value.gadgetSetting)
      this.$emit('update:data', this.setting)
    },
    addBenchMark () {
      if (
        !this.curSetting.benchmarkName ||
        !this.curSetting.dimension ||
        !this.curSetting.timeFrame ||
        !this.curSetting.benchmark
      ) { return }
      let index = this.benchMark.findIndex(v => v.dimension === this.curSetting.dimension && v.timeFrame === this.curSetting.timeFrame)
      index !== -1 ? this.benchMark.splice(index, 1, { ...this.curSetting }) : this.benchMark.push({ ...this.curSetting })
      this.setting.benchMark = JSON.stringify(this.benchMark)
    },
    handleDelete (i) {
      this.benchMark.splice(i, 1)
      this.setting.benchMark = JSON.stringify(this.benchMark)
    }
  }
}
</script>

<style lang="scss">
.add_bench_mark_btn {
  width: 80%;
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
